<template>
  <div class="help-warp">
    <div class="help-header">
      <div class="help-header-warp">
        <i class="help-header-icon animate__animated animate__bounceInUp">
          <t-icon name="books" style="width: 32; height: 32"></t-icon
        ></i>
        <div class="help-header-title">
          <h1 class="animate__animated animate__bounceInUp">帮助中心<br /></h1>
          <div class="p-detail animate__animated animate__bounceInUp">
            <p>"或许这里有你想要找的答案"<br /></p>
          </div>
        </div>
      </div>
    </div>
    <main class="help-main">
      <div class="help-main-header">
        <div class="help-main-header-title view-1">
          <div class="intro_cards">
            <button class="intro_card" @click="toHot">
              <i> <v-icon name="wentiquestions1" width="64" height="64"></v-icon></i>
              <h3>热门问题</h3>
            </button>
            <button class="intro_card" @click="toDownload">
              <i><v-icon name="xiazai" width="64" height="64"></v-icon></i>
              <h3>下载使用</h3>
            </button>
            <button class="intro_card" @click="to11">
              <i><v-icon name="42wenzhang" width="64" height="64"></v-icon></i>
              <h3>十一号文勘</h3>
            </button>
            <button class="intro_card" @click="toMe">
              <i><v-icon name="bangzhuzhongxin" width="64" height="64"></v-icon></i>
              <h3>关于我们</h3>
            </button>
          </div>
        </div>
        <div id="热门问题" class="hot-articles-wrapper view-1">
          <header class="hot-articles-header title-1">
            <h1>热门问题</h1>
          </header>
          <div class="hot-articles articles">
            <button
              class="hot-articles-button doc-link"
              v-for="(item, index) in hotList"
              :key="index"
              @click="goToLink(item.path)"
            >
              {{ item.title }}
            </button>
          </div>
        </div>
      </div>
      <div id="下载使用" class="help-main-content view-1">
        <header class="help-main-content-header title-1">
          <h1>下载使用</h1>
        </header>
        <div class="dow-articles articles">
          <button
            class="hot-articles-button doc-link"
            v-for="(item, index) in downloadList"
            :key="index"
            @click="goToLink(item.path)"
          >
            {{ item.title }}
          </button>
        </div>
      </div>
      <div id="十一号文勘" class="11-main-content view-1">
        <header class="11-main-content-header title-1">
          <h1>十一号文勘</h1>
        </header>
        <div class="11-articles articles">
          <button
            class="hot-articles-button doc-link"
            v-for="(item, index) in articleList"
            :key="index"
            @click="goToLink(item.path)"
          >
            {{ item.title }}
          </button>
        </div>
      </div>
      <div id="关于我们" class="me-main-content view-1">
        <header class="me-main-content-header title-1">
          <h1>关于我们</h1>
        </header>
        <div class="me-articles articles">
          <button
            class="hot-articles-button doc-link"
            v-for="(item, index) in aboutList"
            :key="index"
            @click="goToLink(item.path)"
          >
            {{ item.title }}
          </button>
        </div>
      </div>
    </main>
  </div>
</template>
<script setup>
import { getHelpAll } from '@/api/help'
import { MessagePlugin } from 'tdesign-vue-next'
import router from '@/router'
const hotList = ref([])
const downloadList = ref([])
const articleList = ref([])
const aboutList = ref([])
const toHot = () => {
  const element = document.querySelector('#热门问题')
  element.scrollIntoView({ behavior: 'smooth' })
}
const toDownload = () => {
  const element = document.querySelector('#下载使用')
  element.scrollIntoView({ behavior: 'smooth' })
}
const to11 = () => {
  const element = document.querySelector('#十一号文勘')
  element.scrollIntoView({ behavior: 'smooth' })
}
const toMe = () => {
  const element = document.querySelector('#关于我们')
  element.scrollIntoView({ behavior: 'smooth' })
}
const goToLink = link => {
  if (link) {
    router.push({
      path: '/details',
      query: {
        help: link
      }
    })
  } else {
    MessagePlugin.warning('此文章暂未发布')
  }
}
const getHelpAllList = async () => {
  const res = await getHelpAll()
  if (res.code === 200) {
    //console.log(res.data.articleList)
    hotList.value = res.data.hotList
    downloadList.value = res.data.downloadList
    articleList.value = res.data.articleList
    aboutList.value = res.data.aboutList
  }
}
getHelpAllList()
</script>
<style lang="scss" scoped>
.help-warp {
  width: 100%;
  display: flex;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  position: relative;
  background-color: var(--white-card-color-1);
}
.help-header {
  translate: none;
  rotate: none;
  scale: none;
  transform: translate(0px, 0px);
  position: relative;
  z-index: 99;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  width: 100%;
}
.help-header-warp {
  width: 100%;
  display: flex;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  padding: var(--spacing-page-mid) 0;
  background: var(--help-bg-img);
  background-repeat: no-repeat;
}
.help-header-icon {
  translate: none;
  rotate: none;
  scale: none;
  transform: translate(0px, 0px);
  opacity: 1;
  visibility: inherit;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-18);
  background-color: var(--white);
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  margin-bottom: 40px;
  box-shadow: var(--shadow-2);
}
.help-header-title {
  display: flex;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  vertical-align: baseline;
}
.help-header-title h1 {
  translate: none;
  rotate: none;
  scale: none;
  transform: translate(0px, 0px);
  opacity: 1;
  visibility: inherit;
  z-index: 1;
  font-size: 56px;
  line-height: 64px;
  margin-bottom: var(--spacing-20);
  text-align: unset;
  color: var(--text-title-color-1);
}
.p-detail {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}
.p-detail p {
  font-size: 24px;
  line-height: 32px;
  opacity: 0.8;
  text-align: center;
  color: var(--text-title-color-1);
}
.help-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  margin-top: 0px;
}
.help-main-header {
  width: 100%;
  padding-top: var(--spacing-page-mid);
  display: flex;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  background-color: var(--white-card-color-1);
}
@media screen and (max-width: 640px) {
  .view-1 {
    padding: 0 18px !important;
  }
  .intro_cards {
    gap: 12px !important;
  }
  .intro_card {
    padding: 20px !important;
  }
  .doc-link {
    font-size: 12px !important;
  }
  .help-header-title h1 {
    font-size: 2.5rem !important;
  }
  .p-detail p {
    font-size: 1.5rem !important;
  }
  .title-1 h1 {
    font-size: 2rem !important;
    text-align: center !important;
  }
}
@media screen and (min-width: 640px) {
  .help-main-header {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .view-1 {
    padding-left: 3.4285rem !important;
    padding-right: 3.4285rem !important;
  }
  .articles {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
}
.intro_cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}
.intro_card {
  display: flex;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  width: 100%;
  background-color: rgb(230, 246, 255);
  border-radius: var(--radius-18);
  padding: 40px;
  transition: var(--transition-easeOut-2);
  border: none;
  cursor: pointer;
  color: var(--text-title-color-1);
}
.intro_card:hover {
  transform: scale(1.1);
  background-color: var(--main-bg-color) !important;
  box-shadow: var(--shadow-2);
}

.intro_cards .intro_card:nth-of-type(1) {
  background-color: var(--intra-card-color-1);
}
.intro_cards .intro_card:nth-of-type(2) {
  background-color: var(--intra-card-color-2);
}
.intro_cards .intro_card:nth-of-type(3) {
  background-color: var(--intra-card-color-3);
}
.intro_cards .intro_card:nth-of-type(4) {
  background-color: var(--intra-card-color-4);
}
.intro_cards .intro_card h3 {
  font: var(--Heading-3);
  margin: var(--spacing-32) 0 0 0;
}
.view-1 {
  margin-top: var(--spacing-page-mid-120);
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: var(--spacing-page-mid-120);
  width: 100%;
  max-width: 1440px;
  max-width: var(--view-1);
  box-sizing: border-box;
}
.view-1 h1 {
  margin-bottom: var(--spacing-page-sm) !important;
}
.title-1 h1 {
  font: var(--Heading-1);
  color: var(--text-title-color-1);
  margin-bottom: var(--spacing-16);
  -webkit-box-align: center;
}
.articles {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
  gap: 0px 24px;
}
.doc-link {
  color: var(--text-title-color-1);
  position: relative;
  width: 100%;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
  font: var(--Paragraph-1-400);
  padding: var(--spacing-12);
  transition: var(--transition-easeOut-2);
  border-radius: var(--radius-8);
  border: none;
  background-color: transparent;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-link:hover {
  background-color: f3f7fb;
  box-shadow: var(--shadow-2);
  transform: scale(1.05);
  border: none;
}
.animate__animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animate__bounceInUp {
  animation-name: bounceInUp;
}

@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  75% {
    transform: translate3d(0, 10px, 0);
  }

  90% {
    transform: translate3d(0, -5px, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}
</style>
